<template>
  <div class="wrap">
    <myHead title="评价"></myHead>
    <div class="header">
        <div class="head_top">
          <img src="../../../static/img/uhead.jpg" alt="">
          <div class="head_info">
            <p>骑手&nbsp;李四</p>
            <p>5月01日10:45左右送达</p>
          </div>
        </div>
        <div class="head_bot">
          <div class="star">
            <p>服务:&emsp;</p>
            <van-rate allow-half  v-model="star1"  color="#FF7005" />
          </div>
        </div>
    </div>
    <div class="name">
      <img src="../../../static/img/tianquan.png" alt="">
      <div class="name-right">
        <div class="name-r-t">
          <p>甜甜圈闺蜜套餐五一黄金周限时 特惠双人餐</p>
          <p>￥169</p>
        </div>
        <p>标准套装+果汁</p>
      </div>
    </div>

    <div class="pf-txt">
      <textarea name="" id="" cols="30" rows="10" placeholder="亲，留下您对我们的评价吧~" v-model="txtNum"></textarea>
      <div class="txtNum">{{txtNum.length}}/100</div>
      <div class="shangchuan">
        <div class="photo">
          <van-uploader v-model="fileList" result-type="dataUrl"  multiple :before-read="beforeRead" :after-read="afterRead"/>
        </div>
      </div>
      <div class="pf-nm">
        <p @click="isAnonymous = !isAnonymous"><img :src="isAnonymous?'../../../static/img/cz002.png':'../../../static/img/cz003.png'" alt=""><span>匿名</span></p>
        <p>你写的评价会以匿名的形式展现</p>
      </div>
    </div>

    <footer>
      <div class="housePf">
        <div class="house-tit">
          <img src="../../../static/img/canting111.png" alt=""><p>餐厅评分</p>
        </div>
        <div class="house-item">
          <p>味道</p>
          <van-rate allow-half  v-model="star2"  color="#FF7005" />
        </div>
        <div class="house-item">
          <p>包装</p>
          <van-rate allow-half  v-model="star3"  color="#FF7005" />
        </div>
        <div class="house-item">
          <p>服务态度</p>
          <van-rate allow-half  v-model="star4"  color="#FF7005" />
        </div>
      </div>

      <div class="submit">提交评价</div>
    </footer>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";

  export default {
    name: "goEvaluate",
    components: {
      myHead
    },
    data(){
      return {
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        txtNum:'',
        fileList:[],
        star1:0,
        star2:0,
        star3:0,
        star4:0,
        isAnonymous:false
      }
    },
    methods:{
      pingFen(val){
        console.log(val)
      },
      beforeRead(file){
        console.log(file)
        console.log(this.fileList)
        if (file.type !== 'image/jpeg') {
          console.log('请上传 jpg 格式图片');
          // return false;
        }
        return true;
      },
      afterRead(file){
        console.log(file)
      }
    },
    watch:{
      txtNum(){
        this.txtNum.length>=100?this.txtNum = this.txtNum.substring(0,100):'';
      }
    }
  }
</script>

<style scoped>
  .wrap {
    width: 100%;
    min-height: 6.17rem;
    padding-top: .5rem;
    background-color: #F7F7F7;
  }
  .header {
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: .35rem .15rem .15rem .15rem;
    margin-bottom: .1rem;
  }
  .head_top {
    height: .4rem;
    border-bottom: .01rem solid #EBEBEB;
    padding-bottom: .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-start;
  }
  .head_top>img:nth-child(1) {
    width: .4rem;
    height: .4rem;
    border-radius: 100%;
    margin-right: .1rem;
  }
  .head_info {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .head_info>p {
    color: #333333;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    line-height: .16rem;
  }

  .head_bot {
    margin-top: .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .head_bot>p {
    width:1.15rem;
    height:.37rem;
    background:rgba(255,255,255,1);
    border:.01rem solid rgba(196,196,196,1);
    border-radius:.19rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
  }
  .head_bot>p:nth-child(1) {
    margin-right: .35rem;
  }
  .head_bot>P>img {
    width: .22rem;
    height: .22rem;
    margin-right: .08rem;
  }


  footer {
    width: 100%;
    box-sizing: border-box;
    padding: .15rem .15rem .15rem;
    background-color: #ffffff;
  }
  .name {
    padding: .15rem;
    background-color: #FFFFFF;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin-bottom: .1rem;
  }
  .pf-txt {
    padding: .15rem .15rem 0 .15rem;
    background-color: #FFFFFF;
    margin-bottom: .1rem;
  }

  .name>img {
    width: .7rem;
    max-height: .7rem;
    margin-right: .1rem;
  }
  .name-right {
    width: calc(100% - .8rem);
    height: .7rem;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
  }
  .name-right>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #AAAAAA;
  }
  .name-r-t {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .name-r-t>p:nth-child(1) {
    width: 2rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .name-r-t>p:nth-child(2) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #000000;
  }


  .house-tit {
    height: .5rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .house-tit>img {
    width: .13rem;
    max-height: .13rem;
    margin-right: .1rem;
  }
  .house-tit>p {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
  }
  .house-item {
    height: .4rem;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .house-item>p {
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
    width: .6rem;
    margin-right: .15rem;
  }

  .pf-nm {
    height: .4rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    border-top: .01rem solid #F5F5F5;
  }
  .pf-nm>p:nth-child(1) {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .pf-nm>p:nth-child(1)>span {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #666666;
  }
  .pf-nm>p:nth-child(2) {
    font-size:.12rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #929292;
  }
  .pf-nm>p:nth-child(1)>img {
    width: .14rem;
    max-height: .14rem;
    margin-right: .1rem;
  }
  /deep/ .el-rate__icon {
    font-size: .35rem;
  }
  /deep/ .el-rate {
    height: .35rem !important;
  }
  textarea {
    width: 100%;
    font-size: .14rem;
    height: 1rem;
    box-sizing: border-box;
    padding: .1rem;
    margin-bottom: .05rem;
    outline: none;
    resize: none;
    border: none;
  }

  .shangchuan {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    margin-bottom: .1rem;
  }
  .scimg {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    padding-left: .66rem;
  }
  .scimg>input {
    border: none;
    width: .5rem;
    height: .5rem;
    position: absolute;
    left: .05rem;
    top: .05rem;
    z-index: 1;
    opacity: 0;
  }
  .scimg>img:nth-child(2) {
    width: .66rem;
    height: .66rem;
    margin-right: .1rem;
    position: absolute;
    left: 0;
    top: 0;
  }
  .sctxt {
    height: .66rem;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    line-height: .66rem;
    margin-left: .1rem;
  }

  .txtNum {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #333333;
    text-align: right;
  }

  .submit {
    width:3.45rem;
    height:.44rem;
    background:linear-gradient(0deg,rgba(255,142,65,1),rgba(255,110,0,1));
    box-shadow:0 .04rem .11rem 0 rgba(255,112,5,0.4);
    border-radius:.22rem;
    font-size:.18rem;
    font-family:PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: .44rem;
    margin: .25rem auto;
  }
  .star {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .star>p {
    /*margin-left: .1rem;*/
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #999999;
  }

  >>> .van-rate__icon {
    font-size: .18rem;
  }

  /*上传图片适配*/
  >>> .van-uploader__upload-icon {
    font-size: .24rem;
  }
  >>> .van-uploader__upload {
    width: .75rem;
    height: .75rem;
    margin: 0 .08rem .08rem 0;
    border-radius: .08rem;
  }
  >>> .van-uploader__preview {
    margin: 0 .08rem .08rem 0;
  }
  >>> .van-uploader__preview-image {
    width: .75rem;
    height: .75rem;
  }
  >>> .van-uploader__preview-delete {
    top: -.08rem;
    right: -.08rem;
    color: #969799;
    font-size: .18rem;
  }
  >>> .van-image-preview__index {
    top: .1rem !important;
    font-size: .14rem !important;
    text-shadow: 0 .01rem .01rem #323233 !important;
  }
  >>> .van-swipe-item {
    width: 3.75rem;
  }
</style>
